<!DOCTYPE html>
<html lang="zh-cmn-Hans2">
<head>
<title>MyCAT EYE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Website Template">
<meta name="author" content="The Develovers">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/jquery.mloading.css" />
<link href="assets/css/elegant-icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/vis-network.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<link href="assets/css/my-custom-styles.css" rel="stylesheet" type="text/css">

</head>

<body>
	<div id="wrapper">
		<!-- 导航菜单 -->
		<nav class="navbar navbar-default navbar-fixed-top ">
			<div class="container">
				<a href="index.html" class="navbar-brand">
					<img src="assets/img/logo/logo_80.png" style="width: 80; height: 46px;">
				</a>
				<div id="main-nav-collapse" class="collapse navbar-collapse">
					<ul class="nav navbar-nav main-navbar-nav">
						<li class="dropdown">
							<a href="index.html" class="dropdown-toggle">首页</a>
						</li>
						<li class="dropdown">
							<a href="mysql-mycnf.html" class="dropdown-toggle">my.cnf生成工具</a>
						</li>
						<li class="dropdown active">
							<a href="mysql-cluster.html" class="dropdown-toggle">集群管理</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								Mycat监控 <i class="fa fa-angle-down"></i>
							</a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="monitor-mycat.html">服务监控</a></li>
								<li><a href="monitor-mycat-sql-execute.html">SQL执行情况</a></li>
								<li><a href="monitor-mycat-sql.html">SQL性能监控</a></li>
								<li><a href="monitor-mycat-sqlsum.html">SQL统计</a></li>
								<li><a href="monitor-mycat-datanode.html">数据节点</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								Mysql监控 <i class="fa fa-angle-down"></i>
							</a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="mysql-sql-monitor.html">SQL监控</a></li>
								<li><a href="mysql-slow-monitor.html">慢查询SQL</a></li>
								<li><a href="mysql-performance-monitor.html">性能监控</a></li>
							</ul>
						</li>
						<li class="dropdown ">
							<a href="mysql-health-check.html" class="dropdown-toggle">健康检查</a>
						</li>
						<li class="dropdown ">
							<a target="_blank" href="admin/index.html" class="dropdown-toggle">控制台</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- END 导航菜单 -->
		<!-- 内容 -->
		<section>
			<div class="container">
				<div class="btn-group pull-right" role="group">
					<div class="btn-group">
						<button type="button" class="btn btn-default" id="defaultCluster">MyCAT集群</button>
						<button type="button" class="btn btn-default dropdown-toggle"
							data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<span class="caret"></span> <span class="sr-only">Toggle
								Dropdown</span>
						</button>
						<ul class="dropdown-menu" id="clusterUl">
						</ul>
					</div>
					<input type="hidden" id="defaultClusterId" value="" />
				</div>
				<ol class="breadcrumb" style="font-size: 14px;">
					<li><a href="index.html">首页</a></li>
					<li class="active">集群管理</li>
				</ol>
				<div class="panel panel-default">
					<div class="panel-heading">集群拓扑（双击节点查看详细信息）</div>
					<div class="panel-body" style="line-height: 35px; font-size: 12px;">
						<div id="mynetwork"
							style="width: 100%; height: 450px; margin: 0px auto; border: 0px;">
						</div>
					</div>
				</div>
				<div class="panel panel-default" id="panelDetails" style="display:none;">
					<div class="panel-body" style="line-height: 35px; font-size: 12px;">
							<!-- Nav tabs -->
						  <ul class="nav nav-tabs" role="tablist">
						    <li role="presentation" class="active"><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">基本信息</a></li>
						    <li role="presentation"><a href="#databases" aria-controls="databases" role="tab" data-toggle="tab">数据库</a></li>
						    <li role="presentation"><a href="#status" aria-controls="status" role="tab" data-toggle="tab">状态</a></li>
						    <li role="presentation"><a href="#binlog" aria-controls="binlog" role="tab" data-toggle="tab">二进制</a></li>
						    <li role="presentation"><a href="#replication" aria-controls="replication" role="tab" data-toggle="tab">复制</a></li>
						    <li role="presentation"><a href="#variables" aria-controls="variables" role="tab" data-toggle="tab">变量</a></li>
						  </ul>

						  <!-- Tab panes -->
						  <div class="tab-content">
						    <div role="tabpanel" class="tab-pane active" id="overview">
							    <table class="table table-striped" style="margin-top:15px;">
								  <tbody>
								    <tr>
								      <td style="width:150px;"><b>主机</b></td>
								      <td id="host"></td>
								    </tr>
								    <tr>
								      <td><b>端口</b></td>
								      <td id="port"></td>
								    </tr>
								    <tr>
								      <td><b>标签</b></td>
								      <td id="tags"></td>
								    </tr>
								    <tr>
								      <td><b>版本</b></td>
								      <td id="version"></td>
								    </tr>
								    <tr>
								      <td><b>安装目录</b></td>
								      <td id="basedir"></td>
								    </tr>
								    <tr>
								      <td><b>数据目录</b></td>
								      <td id="datadir"></td>
								    </tr>
								    <tr>
								      <td><b>错误日志</b></td>
								      <td id="logError"></td>
								    </tr>
								    <tr>
								      <td><b>慢查询日志</b></td>
								      <td><span id="slowQueryLog"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="slowQueryLogFile"></span></td>
								    </tr>
								    <tr>
								      <td><b>全局日志</b></td>
								      <td><span id="generalLog"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="generalLogFile"></span></td>
								    </tr>
								    <tr>
								      <td><b>InnoDB buffer pool</b></td>
								      <td id="innodbBufferPoolSize"></td>
								    </tr>
								    <tr>
								      <td><b>数据库字符编码</b></td>
								      <td id="characterSetDatabase"></td>
								    </tr>
								  </tbody>
								</table>
						    </div>
						    <div role="tabpanel" class="tab-pane" id="databases">
						    	<table class="table  table-hover" style="margin-top:15px;">
								  <thead>
									    <tr>
									      <th>数据库</th>
									      <th>大小</th>
									    </tr>
									  </thead>
								  <tbody id="tbody_databases">
								  </tbody>
								</table>
						    </div>
						    <div role="tabpanel" class="tab-pane" id="status">
						    <div class="input-group" style="margin-top:20px;">
							  <span class="input-group-addon" id="basic-addon3">过滤状态：</span>
							  <input type="text" class="form-control" id="input_status" aria-describedby="basic-addon3">
							</div>
						    	<table class="table table-striped" style="margin-top:15px;word-break:break-all; word-wrap:break-all;">
								  <thead>
									    <tr>
									      <th>状态</th>
									      <th>值</th>
									    </tr>
									  </thead>
								  <tbody id="tbody_status">
								  </tbody>
								</table>
						    </div>
						    <div role="tabpanel" class="tab-pane" id="binlog">
								  <div class="panel panel-default" style="margin-top:20px;">
									  <div class="panel-body" id="binlogFiles">
									  	<div class="input-group">
										  <div class="input-group-btn">
										    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="defaultBinlogFile"></span> <span class="caret"></span></button>
									        <ul class="dropdown-menu" id="binlogFileUl">
												</ul>
										  </div>
										  <input type="text" id="showBinlogEvents" class="form-control" value="">
										</div>
										<div class="input-group pull-right">
										<a class="btn btn-success" href="javascript:execute()" style="margin-top:5px;width:80px;" role="button">执行</a>
										</div>
									  </div>
								  </div>
								  <table class="table table-striped" style="margin-top:15px;">
								  <thead>
									    <tr>
									      <th>Event_type</th>
									      <th>End_log_pos</th>
									      <th>Pos</th>
									      <th>Log_name</th>
									      <th>Server_id</th>
									      <th>Info</th>
									    </tr>
									  </thead>
								  <tbody id="tbody_binlog_events">
								  </tbody>
								</table>
								<div class="alert alert-warning" style="display:none;" role="alert" id="alert"></div>
						    </div>
						    <div role="tabpanel" class="tab-pane" id="replication">
						    	<div class="panel panel-default" style="margin-top:20px;">
								  <div class="panel-heading">
								 	<h3 class="panel-title">主复制</h3>
								  </div>
								  <div class="panel-body">
								  	<div class="alert" role="alert" id="alert_master" style="margin-bottom: 5px;">此服务器已被配置为一个复制进程中的主服务器。</div>
									    <span class="label label-default master">主服务器状态</span>
									    <table class="table table-striped master" style="margin-top:15px;">
										  <thead>
											    <tr>
											      <th>File</th>
											      <th>Position</th>
											      <th>Binlog_Do_DB</th>
											      <th>Binlog_Ignore_DB</th>
											    </tr>
											  </thead>
										  <tbody id="tbody_master_status">
										  </tbody>
										</table>
								    	<span class="label label-default master">已连接的从服务器</span>
									    <table class="table table-striped master" style="margin-top:15px;">
										  <thead>
											    <tr>
											      <th>Server_id</th>
											      <th>Host</th>
											      <th>Port</th>
											      <th>Master_id</th>
											    </tr>
											  </thead>
										  <tbody id="tbody_slave_hosts">
										  </tbody>
										</table>
								  </div>
								</div>
								<div class="panel panel-default">
								  <div class="panel-heading">
								  	<h3 class="panel-title">从复制</h3>
								  </div>
								  <div class="panel-body">
								    <div class="alert alert-success" role="alert" id="alert_slave" style="margin-bottom: 5px;">服务器已被配置为一个复制进程中的从服务器。</div>
								    <span class="label label-default slave">从服务器状态</span>
								    <table class="table slave" style="margin-top:15px;">
										  <thead>
											    <tr>
											      <th>Slave Status</th>
											    </tr>
										  </thead>
										  <tbody>
										  		<tr>
											      <td id="td_slave_status"></td>
											    </tr>
										  </tbody>
										</table>
								  </div>
								</div>
						    </div>
						    <div role="tabpanel" class="tab-pane" id="variables">
						    <div class="input-group" style="margin-top:20px;">
							  <span class="input-group-addon" id="basic-addon3">过滤变量：</span>
							  <input type="text" class="form-control" id="input_variables" aria-describedby="basic-addon3">
							</div>
						    	<table class="table table-striped" style="margin-top:15px;word-break:break-all; word-wrap:break-all;">
								  <thead>
									    <tr>
									      <th>变量</th>
									      <th>值</th>
									    </tr>
								  </thead>
								  <tbody id="tbody_variables">
								  </tbody>
								</table>
						    </div>
						  </div>
					</div>
				</div>
			</div>
		</section>
		<!-- END 内容 -->
		<!-- 页脚 -->
		<footer class="footer-newsletter">
			<div class="container">

				<div class="footer-bottom">
					<div class="left">

						<p class="copyright-text">&copy;2017 MyCAT EYE</p>
					</div>

				</div>
			</div>
		</footer>
		<!-- END 页脚 -->
		<div class="back-to-top">
			<a href="#top"><i class="fa fa-chevron-up"></i></a>
		</div>
	</div>

	<!-- JAVASCRIPT -->
	<script src="assets/js/lib/jquery-3.1.1.min.js"></script>
	<script src="assets/js/lib/bootstrap.min.js"></script>
	<script src="assets/js/plugins/easing/jquery.easing.min.js"></script>
	<!-- <script src="assets/js/plugins/morphext/morphext.min.js"></script> -->
	<!-- <script src="assets/js/plugins/owl-carousel/owl.carousel.min.js"></script> -->
	<!-- <script src="assets/js/bravana-lite.js"></script> -->
	<script type="text/javascript" src="assets/js/lib/vis.min.js"></script>
	<!-- loading效果 -->
	<script src="assets/js/lib/jquery.mloading.js"></script>
	<!-- 显示json视图 -->
	<script type="text/javascript" src="/assets/js/lib/jquery.jsonview.js"></script>
	<!-- 置顶悬浮图标 -->
	<div class="float-container float"><a href="javascript:$(window).scrollTop(0, 0);"><img src="assets/img/top.gif" style="border:0px;" /></a></div>
	<!-- 工具 -->
	<script src="assets/js/utils.js"></script>
	<!-- 初始化拓扑图 -->
	<script src="assets/js/mysql/cluster-init.js"></script>
	<script type="text/javascript" src="/assets/js/mysql/mysql-cluster.js"></script>

</body>

</html>
